// 法律法规文档上传
<template>
  <div class="listbody">
    <div class="system-list">文档上传</div>
    <el-divider />
    <div class="box upload">
      <el-button class="L-s" type="primary">导入</el-button>
      <!-- action=""               //上传地址 -->
      <!-- :show-file-list="false" 是否显示上传的文件列表 -->
      <!-- :on-preview="onPreview"	//点击文件列表中已上传的文件时的方法 -->
      <!-- :on-remove="onRemove"	//文件列表移除文件时的方法 -->
      <!-- :before-remove="beforeRemove"  //删除前的方法 -->
      <!-- multiple               //支持多选 -->
      <!-- :limit="3"  //允许上传的个数 -->
      <!-- :on-exceed="handleExceed"  //文件超出个数限制时的方法 -->
      <!-- :file-list="fileList"        //文件列表 -->

      <!-- name="files"             //上传文件的键名 -->
      <!-- :before-upload="beforeUpload"     //上传前的方法 -->
      <!-- :on-progress="onProgress"       //上传进度 -->
      <!-- :data="{token:token}"          //上传参数 -->
      <!-- :before-remove="beforeRemove"   //删除文件前 -->
      <!-- :on-success="uploadSuccess"   //上传成功 -->
      <el-upload
         class="upload-demo" 
        action="string"
        :show-file-list="false"
        :before-upload="beforeUpload"
        :http-request="myUpload"
        multiple
        :limit="3"
        :file-list="fileList">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
    </div>
    <div class="box legalist">
      <Table :tabledata="table"  @row="row" class="table" />
    </div>
  </div>
</template>

<script>
import Table from '@/components/Table'
export default {
    name: 'index',
    components: {
        Table
    },
  data () {
    return {
      fileList: [
        
        ],
       table: {
                headerCellClassName: 'g-table-header-cell',
                loading: false,
                headerCellStyle: { background: '#EEF3FD', color: '#505F7B' },
                cellStyle: { color: '#505F7B' },
                // height: '498',
                uid: '',
                list: [],
                datalist: [
                    // {
                    //     type: 'selection',
                    //     width: '45'
                    // },
                    {
                        prop: 'sourceName',
                        label: '法律法规',
                        width: 35
                    },
                    {
                        prop: 'sex',
                        label: '信息',
                        width: 60
                    },
                    {
                        prop: 'ope',
                        label: '操作',
                        width: 30,
                        fixed: 'right',
                        tem: [
                            {
                                operation: '查看',
                                num: 1
                            },
                            {
                                operation: '编辑',
                                num: 2
                            }
                        ]
                    }
                ],
                pagination: {
                    pagesizes: [10, 20, 30, 40],
                    pagesize: 10,
                    total: 90,
                    pageNo: 1,
                    handleCurrentChange: (cureentPage) => {
                        this.handleCurrentChange(cureentPage)
                    },
                    layout: '->, prev, pager, next, total'
                }
            },
    }
  },
  methods: {
        // 关闭新建/编辑浮框
        cancel(val) {
            this.addVisible = val
            this.editRow={}
            if(this.titlename == '用户数据详情'){
                return
            }else{
                // this.sourceName=''
                // this.sourceType=''
            }
            const query = {
                // sourceName: '',
                // sex: this.sourceType,
                pageNum: 1,
                pageSize:10
            }
            // this.queryDataSource(query)
        },
        // 获取操作表格行数据
        row(index, row, num) {
          if (num.num === 1) {
            this.newDis=true
                this.editRow=row
                const query = {
                  sourceId: row.sourceId
                }
                this.newDataSource('details', query)
            }
            if (num.num === 2) {
              this.newDis=false
                this.editRow=row
                const query = {
                  sourceId: row.sourceId
                }
                this.newDataSource('editor', query)
            }
            // if (num.num === 3) {
              //     const query = {
                //         userIds:[
                  //             row.id
            //         ] 
            //     }
            //     this.batchDeleteDataSourceById(query)
            // }
        },
        // 新建/编辑表格
        newDataSource(params, num) {
          // 显示编辑页面
            this.addVisible = true
            // 操作----重新申请
            if (params === 'new') {
              this.newDis=false
                this.titlename = '新建关联'
            } else if (params === 'details') {
              this.titlename = '用户数据详情'
                // this.getOneDataSourceDetail(num)
            } else if (params === 'editor') {
              this.titlename = '编辑关联信息'
                // this.getOneDataSourceDetail(num)
            }
        },
        // 表格数据页数切换
        handleCurrentChange(page) {
          this.table.pagination.pageNo = page
            const query = {
              // sourceName: this.sourceName || '',
                // sex: this.sourceType || '',
                pageNum: page || '1',
                pageSize: 10
            }
            this.queryDataSource(query)
        },
        // 获取表格数据
        queryDataSource(data) {
          this.table.loading = true
            this.$apis.
                getUserList(data).then(res=>{
                  for(let x in res.data.list){
                    (res.data.list[x].sex == 1)?(res.data.list[x].sex='男'): (res.data.list[x].sex == 2)?(res.data.list[x].sex='女'):res.data.list[x].sex=''
                    }
                    this.table.loading = false
                    this.table.list = res.data.list
                    this.table.pagination.total = res.data.total
                })
                .catch(_=>{
                  this.table.loading = fasle
                })
        },
        // 导入前处理
        beforeUpload(file) {
          var FileExt = file.name.replace(/.+\./, '')
          // 控制文件格式
          if (['xls', 'xlsx'].indexOf(FileExt.toLowerCase()) === -1) {
            this.$message({
              type: 'warning',
              message: '请上传后缀名为xls或xlsx的附件！'
            })
            return false
          }
        },
        // 自定义导入处理
        myUpload(content) {
          const formData = new FormData()
          formData.append('file', content.file)
          const config = {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
            }
          }
          // 上传接口处理
          // var systemId = this.$route.query.id
          // uploadBusinessMetadataFile(formData, this.systemId, config).then(res => {
          //   this.isShow = false
          //   if (res.code === 200) {
          //     this.$message({
          //       type: 'success',
          //       message: '上传成功！'
          //     })
          //   } else if (res.code === 102) {
          //     this.$message({
          //       type: 'warning',
          //       message: res.msg
          //     })
          //   }
          //   this.initList()
          // })
        },
        // 获取勾选表格行数据
        // selectionChange(val) {
        //     const list = []
        //     for (const i of val) {
        //         list.push(i.id)
        //     }
        //     this.multipleSelection = list || []
        // },
        // 删除操作
        // del() {
          //     const query = {
            //         userIds: this.multipleSelection || []
        //     }
        //     this.batchDeleteDataSourceById(query)
        //     this.multipleSelection = ''
        // },
        // 删除数据
        // batchDeleteDataSourceById(val) {
          //     this.$confirm('此操作将永久删除该连接信息, 是否继续?', '提示', {
            //         confirmButtonText: '确定',
        //         cancelButtonText: '取消',
        //         type: 'warning'
        //     })
        //         .then(() => {
          //             this.$apis.
        //                 userDel(val)
        //                     .then(res =>{
          //                         this.$message({
            //                             type: 'success',
        //                             message: '删除成功!'
        //                         })
        //                         this.searchapi()
        //                     })
        //                     .catch(()=>{
          //                     return
        //                 })
        //         })
        //         .catch(()=>{
          //             this.$message({
            //                 // type: 'success',
        //                 message: '删除取消'
        //             })
        //         })
        //     }
        // 搜索
        // searchapi() {
        //     this.table.pagination.pageNo = 1
        //     const query = {
        //         // sourceName: this.sourceName || '',
        //         // sex: Number(this.sourceType) || '',
        //         pageSize:10,
        //         pageNum: 1
        //     }
        //     this.queryDataSource(query)
        // },
    }
}
</script>

<style lang="scss" scoped>

.box {
    position: relative;
    padding: 16px 16px;
    margin: 20px 16px;
    background: #fff;
    box-shadow: 0 2px 4px 0 rgba(97, 160, 230, 0.1);
    border-radius: 8px;
}
</style>